<!-- subpkg_consult/room/components/prescription-info.vue -->
<script lang="ts" setup>
import type { Prescription } from '@/types/room';

defineProps<{
  info: Prescription
}>()
</script>

<template>
  <!-- 处方消息（22） -->
  <view class="e-prescription" v-if="info">
    <view class="prescription-content">
      <view class="list-title">
        <view class="label">电子处方</view>
        <view class="extra">
          原始处方
          <uni-icons size="16" color="#848484" type="right" />
        </view>
      </view>
      <view class="list-item">{{ info.name }} {{ info.genderValue}} {{ info.age }}岁 {{ info.diagnosis }}</view>
      <view class="list-item">开方时间: {{ info.createTime }}</view>

      <view class="dividing-line"></view>

      <template v-for="med in info.medicines" :key="med.id">
        <view class="list-title">
          <view class="label">
            <text class="name">{{ med.name }}</text>
            <text class="unit">{{ med.specs }}</text>
            <text class="quantity">x{{ med.quantity }}</text>
          </view>
        </view>
        <view class="list-item">{{ med.usageDosag }}</view>
      </template>
    </view>
    <navigator v-if="info.orderId === null" class="uni-link" hover-class="none" :url="`/subpkg_medicine/payment/index?id=${info.id}`">
      购买药品
    </navigator>
    <navigator v-else class="uni-link" hover-class="none" :url="`/subpkg_medicine/order_detail/index?id=${info.orderId}`">
      查看购买药品
    </navigator>
  </view>
</template>

<style lang="scss">
.e-prescription {
  width: 100%;
  margin-top: 60rpx;
  border-radius: 20rpx;
  background-color: #eaf8f6;

  .prescription-content {
    padding: 30rpx;
    border-radius: 20rpx;
    background-color: #fff;
  }

  .list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10rpx;
  }

  .list-item {
    margin-bottom: 10rpx;
    font-size: 26rpx;
    color: #848484;
  }

  .label {
    display: flex;
    justify-content: space-between;
    flex: 1;
    font-size: 32rpx;
    color: #121826;

    &.medicine {
      font-size: 30rpx;
      color: #666;
    }
  }

  .unit {
    width: 200rpx;
  }

  .extra {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #848484;
  }

  :deep(.uniui-right) {
    margin-top: 4rpx;
  }

  .dividing-line {
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #ededed;
  }

  .uni-link {
    text-align: center;
    line-height: 1;
    padding: 30rpx 0;
    color: #16c2a3;
    font-size: 32rpx;
  }
}
</style>